<template>
  <div class="home">
    <div>
      <el-dialog
        title="请输入添加的产品信息"
        :visible.sync="add"
        width="30%">
        <!--          :before-close="handleClose"-->

        <el-form>
          <el-input v-model="form.product_name" style="width: 60%" placeholder="产品名"></el-input>
          <el-input v-model="form.brand" style="width: 60%"  placeholder="品牌"></el-input>
          <el-input v-model="form.ex" style="width: 60%"  placeholder="备注"></el-input>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="add = false">取 消</el-button>
            <el-button type="primary" @click="onsubmit">确 定</el-button>
          </span>
      </el-dialog>
    </div>
    <div>
      <el-button style="margin-left: 30px;margin-top: 30px" type="success" @click="open"> 添加产品</el-button>
    </div>
    <div style="text-align: center;margin-top: 30px;">
      <el-table
        :data="goods_option.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        style="width: auto;margin-bottom: 20px;"
        row-key="id"
        border
        @selection-change="handleCurrentChange"
      >
        <el-table-column
          prop="id"
          label="id">
        </el-table-column>
        <el-table-column
          prop="product_name"
          label="产品名称">
        </el-table-column>
        <el-table-column
          prop="brand"
          label="品牌">
        </el-table-column>
        <el-table-column
          prop="ex"
          label="备注">
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align: center;margin-top: 30px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                     :page-sizes="[10, 20, 50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
                     :total="this.goods_option.length">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { product_list } from '../../api/other'
  import { add_goods } from '../../api/other'
  export default {
    name: 'goods',
    data(){
      return{
        add:false,
        form:{
          product_name:'',
          brand:'',
          ex:'',
        },
        goods_option:[],
        list:[],
        pagesize:20,
        currentPage:1
      }
    },
    mounted() {
      this.goods()
    },
    methods:{
      goods() {
        product_list().then(res => { // 调用导入的方法进行查询
          if (res.code === 20000) {
            this.goods_option = []
            for (let index = 0; index < res.options.length; index++) {
              this.goods_option.push({ id : "" ,product_name : "",brand:"",ex:""});
              this.goods_option[index].id= res.options[index][0];
              this.goods_option[index].product_name= res.options[index][1];
              this.goods_option[index].brand= res.options[index][2];
              this.goods_option[index].ex= res.options[index][3];
            }
            console.log(this.goods_option)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      handleSizeChange: function (size) {
        this.pagesize = size;
      },
      handleCurrentChange: function (currentPage) {
        this.currentPage = currentPage;
      },
      open() {
          this.add = true
          // location.reload()
        ;
      },
      onsubmit(){
        add_goods(this.form).then(location.reload())
      },
    }
  }
</script>

<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
